<template>
    <el-menu router :default-active="active" class="el-menu-vertical-demo" :collapse="isCollapse"
             :background-color="bgColor"
             :text-color="textColor"
             :active-text-color="activeColor">
        <!--系统图标-->
        <el-menu-item route="false" index="0" disabled>
            <i class="el-icon-s-promotion
"></i>
            <span slot="title">VueAdmin</span>
        </el-menu-item>
        <!--首页-->
        <el-menu-item index="Index" route="/index" @click="selectTab({title:'首页', name:'Index'})">
            <i class="el-icon-s-home"></i>
            <span slot="title">首页</span>
        </el-menu-item>
        <!--tab栏-->
        <el-submenu v-for="tab in tabList" :index="tab.name" :route="tab.path">
            <template slot="title">
                <i :class="tab.icon"></i>
                <span slot="title">{{tab.title}}</span>
            </template>
            <!--tab子项-->
            <el-menu-item v-for="child in tab.children" :index="child.name" :route="child.path" @click="selectTab(child)">
                <i :class="child.icon"></i>
                <span slot="title">{{child.title}}</span>
            </el-menu-item>
        </el-submenu>
        <!--左侧导航栏展开收起-->
        <el-menu-item @click="handleCollapse(isCollapse)" class="collapse">
            <div v-if="!isCollapse">
                <i class="el-icon-arrow-left"></i>
            </div>
            <div v-else>
                <i class="el-icon-arrow-right"></i>
            </div>
        </el-menu-item>
    </el-menu>
</template>

<script>
    import styles from '../../assets/scss/public.scss';
    export default {
        name: 'SlideTabs',
        data() {
            return {
                isCollapse: false,
                bgColor: styles.bgColor,
                textColor: styles.textColor,
                activeColor: styles.activeColor,
                // active: 'Index'
            }
        },
        computed: {
            // 获取tab栏列表
            tabList: {
                get() {
                    return this.$store.state.tabs.tabList;
                }
            },
            active: {
                get() {
                    return this.$store.state.tabs.editableTabsValue;
                }
            }
        },
        methods: {
            // 导航栏展开收起
            handleCollapse (collapse) {
                this.isCollapse = !collapse
            },
            // 选择tab项事件
            selectTab (child) {
                this.$store.commit('ADD_TABLETABS', child);
            }
        }
    }
</script>

<style scoped>
    .el-menu-vertical-demo{
        height: 100%;
    }
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
    }
    .el-menu-item.is-disabled{
        opacity: 1;
        cursor: pointer;
    }
    .el-menu-vertical-demo .collapse{
        text-align: center;
    }
</style>
